<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交互式数据可视化期末项目</title>
    <style type="text/css">
    	div.content {padding: 1em 5em;}
    	div.graph {margin: 10px auto;
    		       width: 70%;}

    </style>
    <!--导入js库文件-->
    <script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
            crossorigin="anonymous"
    />

    <link
            href="http://getbootstrap.com/docs/3.4/examples/jumbotron-narrow/jumbotron-narrow.css"
            rel="stylesheet"
    />
    <link href="../static/css/signup.css" rel="stylesheet"/>
    <link rel="icon" href="/static/favicon.ico">


</head>

<body>
<div class="container" style="background-color: #e5e5e5;max-width: 90%;border-radius: 15px;padding-top: 20px;margin-top: 5%">
    <div class="header">
        <nav>
            <ul class="nav nav-pills justify-content-end">
                <li class="nav-item">
                    <a class="nav-link" href="/">第一页面</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/page_second">第二页面</a>
                </li>
                <li rclass="nav-item">
                    <a class="nav-link" href="/page_final">最后页面</a>
                </li>
            </ul>
        </nav>
        <h3 class="text-muted">2021年轻人婚恋观图鉴：恋爱很甜，单身也香</h3>
    </div>

    <div>
        <h4 class="text-muted"></h4>
        <p>
            选择另一半时，年轻人们不“颜控”也不“拜金”。38.12%的人最注重两个人三观相合，23.66%的人认为心动才是最大的适合，23.55%的人则会被对方的见识谈吐吸引。


        </p>
    </div>

    <div>
        <h5 class="text-muted"></h5>
        <p>在“理想型”这件事上，男女思维略有差异，男性最看重三观相合（40.09%），女性最在意另一半的见识谈吐（35.85%）。</p>
        <p>数据来源：珍爱网</p>
        <div class='content'>
            <div class='graph'>
                <!--展现可视化图标部分-->
                <h1> {{context.graph3 |safe }} </h1>
            </div>
        </div>
    </div>

        <h4 class="text-muted"></h4>
    </div>

    <div style="background-color: #e5e5e5;max-width: 90%;border-radius: 15px;padding-top: 20px;margin-top: 5%;align-items: center">
        <h5 class="text-muted"></h5>
        <p>
            对年轻人而言，婚姻意味着仪式感、新的人生角色和两人共担压力风险
        </p>
                <h5 class="text-muted"></h5>
        <p>七普数据显示，我国结婚率日益走低，离婚率逐渐走高，年轻的未婚一族们将主要原因归结为结婚成本高（60.45%）和年轻人（尤其是女性）的独立性增强（59.45%），社会观念更加开放（49.91%）、工作压力大（49.18%）同样是重要原因。

“结婚”仍然是被未婚青年们列入人生规划清单的一件大事，就结婚意愿而言，超过98%的人在调研中明确表示自己会步入婚姻，超过半数人认为26-30岁之间最适合结婚。</p>
        <p>数据来源：珍爱网</p>
        <div class='content'>
            <div class='graph'>
                <!--展现可视化图标部分-->
                <h1> {{context.graph4 |safe }} </h1>
            </div>
        </div>
    </div>

    <footer class="footer">
        <p>何健豪 广州南方学院 网络与新媒体专业</p>
    </footer>
</div>
</body>
</html>

<style>
    body{
        background: url("https://bing.ioliu.cn/v1/rand") no-repeat;
        background-size: 100% 100%;
    }
</style>